import LogicFlow, { h } from "@logicflow/core";
// 自定义节点视图
class AutoConnectNodeView extends LogicFlow.NodeView {
    getShape() {
      const { model } = this.props;
      const { x, y, width, height, radius } = model;
      const style = model.getNodeStyle();
      
      return h("g", {}, [
        h("rect", {
          ...style,
          x: x - width / 2,
          y: y - height / 2,
          rx: radius,
          ry: radius,
          width,
          height
        }),
        h("text", {
          class: "lf-node-text",
          x,
          y,
          "text-anchor": "middle",
          "dominant-baseline": "middle",
          style: "font-size: 14px;"
        }, model.text?.value || ""),
        // 绘制锚点
        ...this.drawAnchors()
      ]);
    }
  
    drawAnchors() {
      const { model } = this.props;
      return model.anchors.map(anchor => {
        return h("circle", {
          cx: anchor.x,
          cy: anchor.y,
          r: 5,
          fill: anchor.type === "input" ? "#FF6A00" : "#5F95FF",
          stroke: "#FFF",
          "stroke-width": 2,
          class: "lf-node-anchor",
          "data-anchor-id": anchor.id
        });
      });
    }
  }
  
// 自定义节点模型
class AutoConnectNodeModel extends LogicFlow.NodeModel {
    initNodeData(data) {
      super.initNodeData(data);
      this.width = 120;
      this.height = 80;
      this.radius = 8;
      this.stroke = "#5F95FF";
      this.fill = "#EFF4FF";
      this.anchors = this.getDefaultAnchor();

      
    }
  
    getDefaultAnchor() {
      return [
        {
          x: this.x,
          y: this.y - this.height / 2,
          id: `${this.id}_top`,
          type: "input"
        },
        {
          x: this.x + this.width / 2,
          y: this.y,
          id: `${this.id}_right`,
          type: "output"
        },
        {
          x: this.y + this.height / 2,
          id: `${this.id}_bottom`,
          type: "output"
        },
        {
          x: this.x - this.width / 2,
          y: this.y,
          id: `${this.id}_left`,
          type: "input"
        }
      ];
    }
  
    updateAnchorPosition() {
      this.anchors = this.getDefaultAnchor();
    }
  }
  

  export default {
    type: 'auto-connect-node',
    view: CustomNodeView,
    model: CustomNodeModel
  }